<script setup>
	import {
		reactive
	} from 'vue'
	import {
		jumpTo,
		back,
		navigateTo
	} from '@/utils/common.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '@/api/roomAPI.js'
	const data = reactive({
		ask: '',
		days: 0,
		courseCate: {},
		courseList: [],
	})

	async function courseCate() {
		const res = await http.courseCate(data.days)
		// console.log('🚀 ~ courseCate ~ res:', res)
		data.courseCate = res.data
	}

	async function courseList() {
		const res = await http.courseList(data.days)
		// console.log('🚀 ~ courseCate ~ res:', res)
		data.courseList = res.data
		// console.log('🚀 ~ courseList ~ data.courseList:', data.courseList)
	}

	onLoad(async (options) => {
		data.days = +options.days
		await courseCate()
		await courseList()
	})

	function goBack() {
		jumpTo("/pages/room/index?days=" + data.days)
	}
</script>

<template>
	<uni-header />

	<view class="header">
		<!-- <image class="back" @click="back" src="/static/icon/back.png" mode="aspectFit" /> -->
		<view class="item">
			<uni-icons type="back" @click="goBack" size="24" color="#828282"></uni-icons>
		</view>

		<view style="display: flex; align-items: center;">
			<image class="avatar" :src="data.courseCate.image || '/static/icon/function3.jpg'" mode="aspectFit" />
			<view class="title">
				<text>{{ data.courseCate.name }}\n</text>
				<text style="font-size: 20rpx;">{{ data.courseCate.subtitle }}</text>
			</view>
		</view>
		<view class="item"></view>
	</view>

	<view class="content" v-for="item in data.courseList" :key="item.id"
		@click="jumpTo('/pages/room/depthDetail?id=' + item.id + '&days='+ data.days)">
		<image :src="item.image" mode="aspectFit" />

		<view class="subtitle">
			<text style="font-size: 20rpx;">{{ item.title }}\n</text>
			<text>{{ item.subtitle }}</text>
		</view>


		<uni-icons class="icon" type="forward" size="24" color="#828282"></uni-icons>
		<!-- <image class="icon" src="/static/icon/back.png" mode="aspectFit" /> -->
	</view>
</template>

<style lang="scss" scoped>
	.header {
		margin-top: 50rpx;
		margin-bottom: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avatar {
			border: 1px solid #d5d5d5;
			border-radius: 20rpx;
			width: 87rpx;
			height: 87rpx;
		}

		.title {
			margin-left: 10rpx;
			color: rgb(0, 0, 0);
			font-size: 14rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: left;
		}

		.item {
			padding: 20rpx;
			text-align: right;
			width: 90rpx;
	
		}

		.back {
			// margin-left: 68rpx;
			// margin-right: 121rpx;
			// width: 22rpx;
			// height: 22rpx;
		}
	}

	.content {
		padding-left: 36rpx;
		padding-right:36rpx;
		margin-bottom: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 180rpx;
			height: 180rpx;
		}

		.subtitle {
			margin-right: auto;
			color: rgb(0, 0, 0);
			font-size: 15rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: left;
		}

		.icon {
			// width: 22rpx;
			// height: 22rpx;
			// transform: rotate(180deg);
		}
	}
</style>